<template>
  <el-dialog
      width='70%'
      v-model='dialogFormVisible'
      title='新增巡检项'
      @close='close'
      @open='open'
  >
    <div class='ipt-box'>
      <!-- <div style="width: 170px;">分类:</div>
      <avue-input-tree
      style="width: 500px;"
          filterable
          v-model='form1.modelType'
          :dic='treeLocationData2'
          :clearable='false'
          @change='systemNameChange'
          :props='defaultProps3'
          type='tree'
          placeholder='请选择产品分类'
      ></avue-input-tree> -->
      <!-- locationData2 -->
       <!-- :props='defaultProps4' -->
      <div style="width: 170px;margin-left: 10px;">产品:</div>
      <avue-select
      style="width: 500px;"
          filterable
          v-model='form1.unmodel'
          @change='deviceTypeChange'
          :clearable='false'
          :dic='locationData2'
          :props='defaultProps4'
          placeholder='请选择资产类型'
      ></avue-select>
      <div style="width: 170px;margin-left: 10px;">设备:</div>
      <el-select style="width: 500px;" filterable v-model='form1.devType' @change='categoryListChange'
                 placeholder='请选择资产型号'>
        <el-option
            v-for='item in devTypeData'
            :key='item.productKey'
            :label='item.name'
            :value='item.productKey'
        />
      </el-select>
      <div style="width: 170px;margin-left: 10px;">设备名称:</div>
      <div>
        <el-input style="width: 200px;" disabled :value='equipmentValue' placeholder='请选择设备'></el-input>
      </div>
      <el-button style="margin-left: 10px;" @click='emptyValue'>清空设备</el-button>
      <el-button type='primary' @click='openEquipmentTable'>选择设备</el-button>
    </div>
    <el-divider/>
    <div class='table-top'>
      <span>序号</span><span
        v-if='equipmentValue.length!==0'>设备名称</span><span>事项名称</span><span>事项标准</span><span>操作</span>
    </div>
    <div class='table-show'>
      <div v-for='(item, index) in data1' :key='index'>
        <span><span>{{ index + 1 }}</span></span>
        <span v-if='equipmentValue.length!==0'> {{ item.regionFacilityName || '' }}</span>
        <span> <el-input v-model='item.evenInfo'/></span>
        <span> <el-input v-model='item.evenCriterion'/></span>
        <span>
          <el-tooltip content='保存' placement='bottom'><span>  <el-icon
              @click='
              setList({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: item.evenSwitch
              })
            '
          ><FolderChecked/></el-icon> </span></el-tooltip>
         <el-tooltip content='显示/隐藏' placement='bottom'><span>  <el-icon v-if='item.evenSwitch==="1"' @click='setEvenSwitch({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: 0
              })'><View/></el-icon><el-icon v-else @click='setEvenSwitch({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: 1
              })'><svg t='1685411997570' class='icon' viewBox='0 0 1024 1024' version='1.1'
                       xmlns='http://www.w3.org/2000/svg' p-id='5099' width='40' height='40'><path
             d='M746.986667 307.2l100.096-100.117333a21.333333 21.333333 0 0 0-30.165334-30.165334l-112.853333 112.853334A562.858667 562.858667 0 0 0 512 256C220.416 256 42.666667 477.653333 42.666667 512c0 23.765333 85.248 137.173333 234.346666 204.8l-100.096 100.117333a21.333333 21.333333 0 1 0 30.165334 30.165334l112.853333-112.853334A562.858667 562.858667 0 0 0 512 768c291.584 0 469.333333-221.653333 469.333333-256 0-23.765333-85.248-137.173333-234.346666-204.8zM86.869333 512A541.354667 541.354667 0 0 1 512 298.666667a513.664 513.664 0 0 1 158.122667 25.045333l-69.12 69.12A147.904 147.904 0 0 0 512 362.666667a149.504 149.504 0 0 0-149.333333 149.333333 147.904 147.904 0 0 0 30.144 89.024l-83.093334 83.093333A532.992 532.992 0 0 1 86.869333 512zM618.666667 512a106.496 106.496 0 0 1-165.397334 88.896l147.626667-147.626667A105.941333 105.941333 0 0 1 618.666667 512z m-213.333334 0a106.496 106.496 0 0 1 165.397334-88.896l-147.626667 147.626667A105.941333 105.941333 0 0 1 405.333333 512z m106.666667 213.333333a513.685333 513.685333 0 0 1-158.122667-25.045333l69.12-69.12A147.904 147.904 0 0 0 512 661.333333a149.504 149.504 0 0 0 149.333333-149.333333 147.904 147.904 0 0 0-30.144-89.024l83.093334-83.093333A532.992 532.992 0 0 1 937.130667 512 541.354667 541.354667 0 0 1 512 725.333333z'
             fill='#646464' p-id='5100'></path></svg></el-icon>  </span></el-tooltip>
          <el-tooltip content='删除' placement='bottom'><span> <el-icon @click='delList(item)'><Delete/></el-icon> </span></el-tooltip>
          <el-tooltip content='一键同步' placement='bottom'><span> <el-icon v-if='this.equipmentValue!==""'
                                                                            @click='sytList(item)'><Refresh/></el-icon> </span></el-tooltip>

        </span>
      </div>
      <div class='ipt-table' v-show='isShow'>
        <span></span>
        <span v-if='equipmentValue.length!==0'></span>
        <span><el-input class='focus-module' v-model='form.evenInfo' placeholder='输入事项名称'/></span>
        <span><el-input class='focus-module' v-model='form.evenCriterion' placeholder='输入事项标准'/></span>
        <span class='focus-module'>
          <el-tooltip content='保存' placement='bottom'><span> <el-icon @click='addList' class='focus-module'><FolderChecked/></el-icon> </span></el-tooltip>
          <!--          <el-icon class='focus-module'><View /></el-icon>-->
          <!--          <el-icon class='focus-module'><Delete /></el-icon>-->
          <!--          <el-icon class='focus-module'><Refresh /></el-icon>-->
        </span>
      </div>
    </div>
    <div class='add-box'>
      <div style='display: flex; justify-content: center; align-items: center' v-show='form1.devType'>
        <el-icon>
          <Plus/>
        </el-icon>
        <div @click='addObj' class='addbtn'>增加事项</div>
      </div>
    </div>
    <!--    设备选择弹出框-->
    <equipment ref='equipment' :data='form1' @getIds='getIds'></equipment>
  </el-dialog>
</template>

<script>
import {
  getTreeList,
  getlist,
  setList,
  addList,
  getChl,
  sytList,
  delLists,
  fetchaccessCategoryList, getDeviceType, fetchaccessProductList, fetchaccessDeviceList, delChildLists
} from '/@/api/check/omicheckequipment'
import equipment from '/@/views/omcheck/inspection/omicheckequipment/equipment.vue'
import {ElLoading} from "element-plus";

export default {
  name: 'dialog',
  components: {equipment},
  data() {
    return {
      equipmentValue: '',
      form1: {
        modelType: '',
        unmodel: '',
        devType: '',
        onlineStatus: 1
      },
      defaultProps3: {
        label: 'name',
        value: 'id'
      },
      defaultProps4: {
        label: 'name',
        value: 'identify'
      },
      defaultProps5: {
        label: 'bamAAssetsModelCn',
        value: 'bamAAssetsDeviceCode'
      },
      locationData2: [],
      deviceTypeData: [],
      devTypeData: [],
      dialogFormVisible: false,
      value: '',
      input: '',
      isShow: false,
      value1: [],
      data: [],
      data2: [],
      cities: [],
      regionCode: '',
      data1: [],
      form: {
        evenInfo: '',
        evenCriterion: '',
        evenSwitch: '1'
      },
      selectList: [],
      equipmentList: [],
      loading:null
    }
  },
  created() {
    // getTreeType({current: 1,size:9999}).then((res) => {
      fetchaccessCategoryList({current: 1,size:9999}).then((res) => {
      this.locationData2 = res.data.records;
    })

  },
  computed: {},
  watch: {
    'form1.modelType': {
      handler(val, oldVal) {
        if (val) {
          getDeviceType({bamAssetsTypeMcode: val}).then((res) => {
            this.deviceTypeData = res.data.records
          })
        }
      }
    },
    'form1.unmodel': {
      handler(val, oldVal) {
        if (val) {
          fetchaccessProductList({current:1,size:9999,category:val}).then((res) => {
            this.devTypeData = res.data.records
          })
        }
      }
    },
    equipmentValue(val) {
      if (val === '' && this.regionCode !== '') {
        this.openLoading()
        getlist(this.regionCode).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(()=>{
          this.closeLoading()
        })
      }
    }
  },
  beforeDestroy() {
  },
  methods: {
    openLoading() {
      this.loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    closeLoading(){
      this.loading.close()
    },
    // 资产类型下拉框触发
    deviceTypeChange() {
      this.form1.devType = ''
      this.equipmentValue = ''
      this.data1 = []
    },
    // 系统名称下拉框触发
    systemNameChange() {
      this.form1.unmodel = ''
      this.form1.devType = ''
      this.equipmentValue = ''
      this.data1 = []
    },
    // 清空设备
    emptyValue() {
      this.equipmentValue = ''
    },
    // 设备查询巡检事项列表
    getIds(val, names, selectList) {
      if (selectList.length === 0) {
        this.openLoading()
        return getlist(this.regionCode).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(()=>{
          this.closeLoading()
        })
      }
      this.selectList = selectList
      this.value1 = val
      this.openLoading()
      getChl({ pidList: this.value1.join(',')}).then((res) => {
        this.data1 = res.data
        this.closeLoading()
      }).catch(()=>{
        this.closeLoading()
      })
      this.equipmentValue = names
    },
    // 打开设备表格弹出框
    openEquipmentTable() {
      // for (let key in this.form1) {
      //   if (this.form1.hasOwnProperty(key)) {
      //     if (this.form1[key] === '') {
      //       return this.$message.error('请选择资产型号!')
      //     }
      //   }
      // }
      this.$refs.equipment.dialogFormVisible = true
    },
    open() {
      window.addEventListener('click', this.listenerChangeFlag)
      this.data1 = []
    },
    close() {
      window.removeEventListener('click', this.listenerChangeFlag)
      this.form1.modelType = ''
      this.form1.unmodel = ''
      this.form1.devType = ''
      this.equipmentValue = ''
      this.data1 = []
    },
    // 设置新增输入框的显示隐藏
    listenerChangeFlag(e) {
      if (e.target.className === 'addbtn') return
      let nowClassName = e.target.parentNode.parentNode.className
      if (!nowClassName.includes('focus-module')) {
        // if (this.isShow) {
        //   if (this.form.evenInfo && this.form.evenCriterion) {
        //     this.addList()
        //   }
        // }
        this.isShow = false
        this.form = {
          evenInfo: '',
          evenCriterion: '',
          evenSwitch: '1'
        }
      }
    },
    // 资产型号查询
    categoryListChange(val) {
      if (val !== '') {
        this.regionCode = val
        this.openLoading()
        getlist(val).then((res) => {
          this.data1 = res.data
          this.closeLoading()
          this.equipmentValue = ''
          // 大类新增时需要所有小类名称
          fetchaccessDeviceList({
            current: 1,
            size: 9999,
            // modelType: this.form1.modelType,
            // unmodel: this.form1.unmodel,
            productKey: this.form1.devType,
            // onlineStatus: this.form1.onlineStatus
          }).then((res) => {
            this.equipmentList = res.data.records
          })
        }).catch(()=>{
          this.closeLoading()
        })
      }

    },
    // 同步事项
    sytList(item) {
      let find = this.devTypeData.find(item => item.bamAAssetsDeviceCode == this.form1.devType)
      // let pname = find.bamAAssetsModelCn
      // let arr = this.equipmentList.map((item) => {
      //   return {regionCode: item.deviceNo, regionName: item.deviceName}
      // })
      sytList({pid: this.regionCode+'', id: item.id, pname,evenSwitch:item.evenSwitch,evenInfo:item.evenInfo,evenCriterion:item.evenCriterion}).then((res) => {
        this.$message.success('同步成功!')
        this.getData()
      })
    },
    // 改变显隐状态
    setEvenSwitch(data) {
      setList(data).then((res) => {
        this.$message.success('更改完成')
        this.getData()
      })
    },
    // 事项查询获取列表数据
    getData() {
      if (this.value1.length !== 0) {
        this.openLoading()
        getChl({pidList: this.value1.join(',')}).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(()=>{
          this.closeLoading()
        })
        this.$emit('refreshList')
      } else {
        this.openLoading()
        getlist(this.regionCode).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(()=>{
          this.closeLoading()
        })
        this.$emit('refreshList')
      }
    },
    // 删除事项
    delList(obj) {
      this.$confirm('是否确认删除以选择的数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            if (this.equipmentValue.length === 0) {
              return delLists({id: obj.id, regionCode: this.regionCode, regionFacilityCode: obj.regionFacilityCode})
            } else {
              return delChildLists({id: obj.id, regionCode: this.regionCode, regionFacilityCode: obj.regionFacilityCode})
            }
          })
          .then((data) => {
            this.$message.success('删除成功')
            this.getData()
          })
          .catch((cancelorerror) => {
          })
    },
    // 新增事项
    addList() {
      for (let key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          if (this.form[key] === '') {
            return this.$message.error('请输入值!')
          }
        }
      }
      let arr = this.selectList.map((item) => {
        return {regionCode: item.unitNo, regionName: item.deviceName}
      })
      if (this.equipmentValue.length === 0) {
        arr = this.equipmentList.map((item) => {
          return {regionCode: item.unitNo, regionName: item.deviceName}
        })
      }
      let obj = this.devTypeData.find((item) => {
        return item.productKey === this.regionCode
      })
      let flag = 0
      this.equipmentValue.length === 0 ? flag = 0 : flag = 1
      this.openLoading()
      addList({
        regionCode: this.regionCode,
        regionName: obj.name,
        evenDtoList: [this.form],
        deviceDtoList: arr,
        flag: flag+''
      }).then((res) => {
        this.$message.success('新增成功!')
        this.closeLoading()
        this.getData()
        this.isShow = false
        this.form = {
          evenInfo: '',
          evenCriterion: '',
          evenSwitch: '1'
        }
      }).catch(()=>{
        this.closeLoading()
      })
    },
    // 修改事项
    setList(data) {
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          if (data[key] == '') {
            return this.$message.error('请输入巡检项信息!')
          }
        }
      }
      setList(data).then((res) => {
        this.$message.success('修改成功')
        this.getData()
      })
    },
    getTreeList() {
      getTreeList().then((res) => {
        this.data = res.data
      })
    },
    // 显示输入框
    addObj() {
      this.isShow = true
    }
  }
}
</script>

<style lang='scss' scoped>
.ipt-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // & > div {
  //   display: flex;
  //   align-items: center;
    
  // }
}

.table-top {
  font-size: 17px;
  margin-bottom: 10px;
  display: flex;

  span {
    display: flex;
    justify-content: start;
    width: 33%;
  }

  & > span:nth-child(1) {
    width: 10%;
  }
}

.table-show {
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ebedf1;

  & > div {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;

    & > span {
      width: 33%;
      display: flex;
      justify-content: start;
      align-items: center;
    }

    & > span:nth-child(1) {
      width: 10%;

      & > span {
        margin-left: 14px;
      }
    }

    & > span:last-child {
      font-size: 20px;
      margin-left: 5px;

      i {
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
}

.ipt-table {
  margin: 5px 0;
  z-index: 10;
}

.add-box {
  display: flex;
  align-items: center;
  color: #b3c6dd;

  div {
    cursor: pointer;
  }
}

.el-input {
}

</style>